<div class="row justify-content-center">
    <div class="col-8">
        <form name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
            <h2 id="jhi-book-heading">Create or edit a Book</h2>
            <div>
                <jhi-alert-error></jhi-alert-error>
                <div class="form-group" [hidden]="!book.id">
                    <label for="id">ID</label>
                    <input type="text" class="form-control" id="id" name="id"
                        [(ngModel)]="book.id" readonly />
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="field_title">Title</label>
                    <input type="text" class="form-control" name="title" id="field_title"
                        [(ngModel)]="book.title" required/>
                    <div [hidden]="!(editForm.controls.title?.dirty && editForm.controls.title?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.title?.errors?.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="field_author">Author</label>
                    <input type="text" class="form-control" name="author" id="field_author"
                        [(ngModel)]="book.author" required/>
                    <div [hidden]="!(editForm.controls.author?.dirty && editForm.controls.author?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.author?.errors?.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="field_published">Published</label>
                    <div class="input-group">
                        <input id="field_published" type="text" class="form-control" name="published" ngbDatepicker  #publishedDp="ngbDatepicker" [(ngModel)]="book.published"
                        required/>
                        <span class="input-group-append">
                            <button type="button" class="btn btn-secondary" (click)="publishedDp.toggle()"><fa-icon [icon]="'calendar-alt'"></fa-icon></button>
                        </span>
                    </div>
                    <div [hidden]="!(editForm.controls.published?.dirty && editForm.controls.published?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.published?.errors?.required">
                        This field is required.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="field_quantity">Quantity</label>
                    <input type="number" class="form-control" name="quantity" id="field_quantity"
                        [(ngModel)]="book.quantity" required min="0" jhiMin="0"/>
                    <div [hidden]="!(editForm.controls.quantity?.dirty && editForm.controls.quantity?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.quantity?.errors?.required">
                        This field is required.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.controls.quantity?.errors?.min">
                            This field should be at least 0.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.controls.quantity?.errors?.number">
                            This field should be a number.
                        </small>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-control-label" for="field_price">Price</label>
                    <input type="number" class="form-control" name="price" id="field_price"
                        [(ngModel)]="book.price" required min="0" jhiMin="0"/>
                    <div [hidden]="!(editForm.controls.price?.dirty && editForm.controls.price?.invalid)">
                        <small class="form-text text-danger"
                        [hidden]="!editForm.controls.price?.errors?.required">
                        This field is required.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.controls.price?.errors?.min">
                            This field should be at least 0.
                        </small>
                        <small class="form-text text-danger"
                            [hidden]="!editForm.controls.price?.errors?.number">
                            This field should be a number.
                        </small>
                    </div>
                </div>

            </div>
            <div>
                <button type="button" id="cancel-save" class="btn btn-secondary"  (click)="previousState()">
                    <fa-icon [icon]="'ban'"></fa-icon>&nbsp;<span>Cancel</span>
                </button>
                <button type="submit" id="save-entity" [disabled]="editForm.form.invalid || isSaving" class="btn btn-primary">
                    <fa-icon [icon]="'save'"></fa-icon>&nbsp;<span>Save</span>
                </button>
            </div>
        </form>
    </div>
</div>
